<template>
  <div class="detail-box">
      <task-detail-table :form="collaborationTask"></task-detail-table>
      <task-map
          :node-states="nodeStates"
          @click-node="handleNodeClick"
          :node-state-styles="nodeStateStyles"
          mode="display"
          v-model="collaborationTask.subTasks">
      </task-map>
      <div v-if="!mySubTask">请点击一个节点任务查看详情并领取</div>
      <div v-else>
        黄色节点是你领取的任务！
      </div>
    <el-drawer
      :visible.sync="showCurrentSubTask"
      :size="500"
      title="子任务详情"
    >
      <task-detail-table
        :form="{...currentSubTask, username: collaborationTask.username}"
        style="margin-bottom: 10px"
      ></task-detail-table>
      <el-button
        v-if="!mySubTask"
        @click="handleClaimTask"
      >领取子任务</el-button>
      <el-button
        v-else-if="mySubTask.taskId === currentSubTask.id"
        disabled
      >
        已领取
      </el-button>
    </el-drawer>
  </div>
</template>

<script>
import TaskDetailTable from "@/components/new/task-detail-table/TaskDetailTable";
import TaskMap from "@/components/new/task-map/TaskMap";
import {getCollaborationTaskDetail, getCollaborationTaskMyGroup, pickSubTask} from "@/api/task";
export default {
  name: "WorkerTaskDetail",
  components: {TaskMap, TaskDetailTable},
  data(){
    return {
      collaborationTask: {},
      currentSubTask: {},
      myGroup: undefined,
      nodeStateStyles: {
        myTask: {
          stroke: '#ff7900',
          fill: '#f1a36a'
        }
      },
      showCurrentSubTask: false
    }
  },
  computed: {
    nodeStates() {
      const states = {}

      if(this.currentSubTask.id !== undefined){
        states.selected = new Set([this.currentSubTask.id])
      }

      if(this.mySubTask){
        console.log(this.mySubTask)
        states.myTask = new Set([this.mySubTask.taskId])
      }

      return states;
    },
    mySubTask() {
      if(this.myGroup){
        return this.myGroup.filter(item => item.workerId === Number.parseInt(sessionStorage.getItem('userid')))[0]
      }else{
        return undefined
      }
    }
  },
  methods: {
    handleNodeClick(nodeId){
      this.currentSubTask = this.collaborationTask.subTasks.filter(task => task.id === nodeId)[0];
      this.showCurrentSubTask = true;
    },
    loadAll(){
      getCollaborationTaskDetail(this.$route.params.taskid).then(res => {
        if(res.code === 200){
          this.collaborationTask = res.data;
        }else{
          throw new Error(res.msg);
        }
      }).then(() => getCollaborationTaskMyGroup(this.$route.params.taskid, sessionStorage.getItem('userid')))
          .then(res => {
            if(res.code === 200){
              this.myGroup = res.data;
            }
          }).catch(e => {
        this.$message.error(e.message);
      });
    },
    handleClaimTask(){
      pickSubTask(this.currentSubTask.id, sessionStorage.getItem('userid')).then(
          res => {
            if(res.code === 200){
              this.loadAll();
              this.showCurrentSubTask = false;
              this.$message.success(res.msg);
            }else{
              throw new Error(res.msg);
            }
          }
      ).catch(e => {
        this.$message.error(e.message);
      });
    }
  },
  mounted() {
    this.loadAll();
  },
}
</script>

<style scoped>
</style>
